<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      svg{
         border:2px solid #ccc;
      }
    </style>
</head>
<body>
   <svg id="svg1">
   
   </svg>

    <script src="snap.svg.js"></script>
    <script>
       const data = [
        {text:'阿里',count:60},
        {text:'京东',count:70},
        {text:'字节',count:40},
        {text:'腾讯',count:90},
        {text:'百度',count:100},
       ]
       
       const svg = Snap('#svg1');
       svg.attr({
         width:400,
         height:400,
         viewBox:'0 0 100 100'
       });

       /*
        绘制环形图的一部分
        由4个点组成 
        这4个点可以分成两组  ,分别是两个弧上的点。
        需要两个弧对应的半径及角度，分别计算出4个点。
        假设：以y的负轴和x正轴夹角方向绘圆
        假设第一部分起始与y轴的夹角是20度 ， 结尾与y轴的夹角是140度
       */
      const r1 = 20 ;
      const r2 = 30 ;
      const origin = {x:50,y:50};
      const colors = ['#fac','#caf','#afc','skyblue','purple'];
      const sum = data.map(o=>o.count).reduce((c1,c2)=>c1+c2);
      const degs = data.map(o=>o.count/sum * 360);

      degs.forEach((deg,i)=>{
          let startDeg = i==0?0:degs.slice(0,i).reduce((d1,d2)=>d1+d2) ;
          let lastDeg = startDeg + degs[i] ;

          let f = (lastDeg - startDeg) > 180?1:0;
          let start1 = {
            x:origin.x + Snap.sin(startDeg) * r1 ,
            y:origin.y - Snap.cos(startDeg) * r1 
          } 
          let start2 = {
            x:origin.x + Snap.sin(startDeg) * r2 ,
            y:origin.y - Snap.cos(startDeg) * r2 
          } 
          let end1 = {
            x:origin.x + Snap.sin(lastDeg) * r1 ,
            y:origin.y - Snap.cos(lastDeg) * r1 
          }
          let end2 = {
            x:origin.x + Snap.sin(lastDeg) * r2 ,
            y:origin.y - Snap.cos(lastDeg) * r2 
          }

          let d = `M${start1.x} ${start1.y} A${r1} ${r1} 0 ${f} 1 ${end1.x} ${end1.y}`;
          d+=`L${end2.x} ${end2.y}`;
          d+=`A${r2} ${r2} 0 ${f} 0 ${start2.x} ${start2.y} Z`
          let path = svg.path(d);
          path.attr({
            fill:colors[i],
          });
      });
      
    </script>
</body>
</html>